<template>
    <div class="footer-container">
       <div class="containerBox">
            <!-- 左侧 -->
        <div class="custom-control custom-checkbox">
           <input type="checkbox" class="custom-control-input" :checked="isFull" @change="fullChange" />
           <label class="custom-control-label" for="cbFull">全选</label> 
        </div>
        <!-- 中间 -->
        <div class="total">
            <span>合计：</span>
            <span>￥{{ amount }}</span>
        </div>
        <!-- 结算按钮 -->
        <button type="button" class="btn-button">结算（{{total}}）</button>
       </div>
    </div>
</template>
<script>
export default {
    props: {
        isFull: {
            type: Boolean,
            default: true
        },
        amount: {
            type: Number,
            default: 0  
        },
        total: {
            type: Number,
            default: 0  
        }
    },
    methods: {
        // 全选
        fullChange(e){
            // console.log(e.target.checked);
            this.$emit('full-change',e.target.checked)
        }
    }
}
</script>
<style lang="less" scoped>
.containerBox{
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding: 0 4px;
    border-top: 1px solid #ccc;
    background-color: salmon;
    border-radius: 10px;
    .custom-checkbox{ 
        flex: 1;
        font-size: 14px; 
        display: flex;
        align-items: center;
        .custom-control-input{ width: 16px; height: 16px; }
    }
    .total{ 
        flex: 1;
        font-size: 14px;
        span:nth-child(2){
            color: red;
        }
    }
    .btn-button{ 
        flex:1;
        height: 36px;
        background-color: #00a1d6;
        border-radius: 16px;
        font-size: 16px;
        color: #fff;
        border: none;
    }
}
</style>